<template>
    <div class="user-form">
        <el-form ref="form" :model="user" label-width="80px">

            <el-row>
                <el-col :span="20">
                    <div class="office-logo">
                        <el-form-item label="用户头像:" >
                            <el-upload
                                    class="avatar-uploader"
                                    :action="uploadFilePath"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :on-error="uploadError"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="user.userImage" :src="user.userImage" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>登陆账号</template>
                        <el-input v-model="user.loginCode" maxlength="64" style="width:500px" :disabled="user.loginCode=='system'"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户昵称:">
                        <el-input v-model="user.userNick" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户性别:">
                        <el-select v-model="user.userSex"  class="condition-input" style="width:500px">
                            <el-option v-for="item in userSexItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>手机号</template>
                        <el-input v-model="user.userPhone" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>邮箱地址</template>
                        <el-input v-model="user.userEmail" maxlength="255" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>用户等级</template>
                        <el-select v-model="user.userGrade"  class="condition-input" style="width:500px">
                            <el-option v-for="item in userGradeItem" :key="item.value" :label="item.label" :value="item.value" :disabled="user.loginCode=='system'"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>用户类别</template>
                        <el-select v-model="user.isSystem" class="condition-input" style="width:500px">
                            <el-option v-for="item in isSystemItem" :key="item.value" :label="item.label" :value="item.value" :disabled="user.loginCode=='system'"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="user.id">
                    <el-form-item label="用户角色:">
                        <el-tooltip content="当前只能查看，不可编辑">
                            <el-input v-model="user.userRole" maxlength="255" style="width:500px" disabled></el-input>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="user.remarks" style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">取 消</el-button>
                        <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>

                </span>
            </div>

        </el-form>
    </div>
</template>

<script>
    import userApi from '@/api/user/userApi'
    export default {
        name: "UserForm",
        data(){
            return{
                uploadFilePath:process.env.VUE_APP_REQUEST_URL+'/a/core/file/fileUpload',
                user:{
                    id:'',
                    loginCode:'',
                    userNick:'',
                    userImage:'',
                    userSex:'',
                    userPhone:'',
                    userEmail:'',
                    userRole:'',
                    isSystem:'',
                    userGrade:'',
                    remarks:'',
                },
                userSexItem:[{value:"1", label: '男'},{value:"2", label: '女'}],
                isSystemItem:[{value:"1",label:"系统用户"},{value:"2",label:"普通用户"}],
                userGradeItem:[{value:"1",label:"普通用户"},{value:"2",label:"普通管理员"},{value:"3",label:"超级管理员"}]
            }
        },
        methods:{
            editDataBoxClose(){
                this.$emit('editDataBoxClose',false)
            },
            async onEditSubData(){
               let res = '';
               if (this.user.id != ''){
                   res = await userApi.updateUser(this.user)
                   if (res.code == '200'){
                       this.$emit('onUpdateSuccess',res.data)
                   }else {
                       this.$message.error(res.msg)
                   }
               }else {
                   res = await userApi.saveUser(this.user)
                   if (res.code == '200'){
                       this.$emit('onAddSuccess',res.data)
                   }else {
                       this.$message.error(res.msg)
                   }
               }

            },
            clearDate(){
                let user = {
                        userCode:'',
                        loginCode:'',
                        userNick:'',
                        userImage:'',
                        userSex:'',
                        userPhone:'',
                        userEmail:'',
                        userRole:'',
                        isSystem:'',
                        userGrade:'',
                }
                this.user = user
            },
            uploadError() {
                this.$message.error('上传失败')
            },
            handleAvatarSuccess(res, file) {
                if (res.code=='200'){
                    this.user.userImage =res.data;
                }else {
                    this.uploadError();
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        props:{
            editItemData:{
                require:true
            }
        },
        watch:{
            editItemData:{
                immediate: true,
                handler(newVal,oldVal){
                    if (newVal!=''){
                        this.user = newVal
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>